import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Icon,Tabs,message,Row, Col,Input,DatePicker,Button,Table,Form,Select,Cascader,Upload,Spin,Modal } from 'antd';
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import api from '../api';
import moment from 'moment';


const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const Option = Select.Option;
import {
  COMPANY_NATRUE,
  SHADOW_RATING
} from '../constants/index';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};


class CompanyCustomDetail extends React.Component {
    constructor(props, context){
        super(props, context);
        var {loan_id,operate_type} = props.location.query||{};
        this.state={
          loading:false,
          stockPreviewImage:'',
          stockPreviewVisible:false,
          licensePreviewImage:'',
          licensePreviewVisible:false,
          custom:{

          },

        };
    }
    componentWillMount(){
      let{id} = this.props.location.query||{};
      if (id) {
        this.getDetailById(id);
      }
    }
    

    componentWillReceiveProps(nextProps){

    }

    async getDetailById(id){
      this.setState({
        loading:true,
      })
      let result = await api("/system/companyCustom/detail",{id});

      if (result.success) {
        let {licensePreviewImage,stockPreviewImage} = this.state;
        if (result.data && result.data.license && result.data.license.length > 0) {
          licensePreviewImage = result.data.license[0].previewUrl;
        }
        if (result.data && result.data.equity && result.data.equity.length > 0) {
          stockPreviewImage = result.data.equity[0].previewUrl;
        }
        this.setState({
          custom:result.data,
          loading:false,
          licensePreviewImage,
          stockPreviewImage,
        })
      }else{
        this.setState({
          loading:false
        })
        message.error(result.message);
      }
      
    }



    render() {
      const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        var {custom,stockPreviewImage,licensePreviewImage,stockPreviewVisible,licensePreviewVisible} = this.state;

       return (
        <Spin spinning={this.state.loading}>
          <div className="containerWithBorder margin20 bgWhite">
            <div className="padding15 containerWithBottomBorder" style={{backgroundColor:"#EFEFEF"}}>
              <Button
                type="primary"
                className="marginR15"
                onClick={() =>{
                  this.context.router.push("/systemManage/companyCustom/list");
                }}
              >返回</Button>
              
              <span
              >{custom.name}</span>
            </div>
            <h2 className="type-title margin15">基本信息</h2>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  公司名称
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {custom.name}
                </Col>

                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightAndLeftBorder padding15"
                >
                  注册地址
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {custom.province_name}{custom.city_name}{custom.area_name}
                </Col>


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  所属行业
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {custom.industry}
                </Col>

                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightAndLeftBorder padding15"
                >
                  企业性质
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {COMPANY_NATRUE[custom.nature]}
                </Col>


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  法人代表
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {custom.representative}
                </Col>

                


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  母公司
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  华润电力工程服务有限公司
                </Col>
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightAndLeftBorder padding15"
                >
                  母公司企业性质
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  国企（上市）
                </Col>


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  终极母公司
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  华润电力有限公司
                </Col>

                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightAndLeftBorder padding15"
                >
                  终极母公司企业性质
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  国企（上市）
                </Col>


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px",paddingBottom:"140px"}}
                  className="containerWithRightBorder padding15"
                >
                  股权关系
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {
                    stockPreviewImage ? 

                    <div className="clearfix">
                      <img 
                        src={stockPreviewImage}
                        onClick={() =>{
                          this.setState({
                            stockPreviewVisible:true,
                          })
                        }}
                        style={{width:100,height:100}}
                        >
                      </img>
                      <Modal visible={stockPreviewVisible} footer={null} onCancel={() =>{
                        this.setState({
                          stockPreviewVisible:false,
                        })
                      }}>
                          <img alt="example" style={{ width: '100%' }} src={stockPreviewImage} />
                      </Modal>
                    
                    </div>
                    :null
                  }
                  
                </Col>

                


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px",paddingBottom:"140px"}}
                  className="containerWithRightBorder padding15"
                >
                  营业执照
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {
                    licensePreviewImage ? 

                    <div className="clearfix">
                      <img 
                        src={licensePreviewImage}
                        onClick={() =>{
                          this.setState({
                            licensePreviewVisible:true,
                          })
                        }}
                        style={{width:100,height:100}}
                        >
                      </img>
                      <Modal visible={licensePreviewVisible} footer={null} onCancel={() =>{
                        this.setState({
                          licensePreviewVisible:false,
                        })
                      }}>
                          <img alt="example" style={{ width: '100%' }} src={licensePreviewImage} />
                      </Modal>
                    
                    </div>
                    :null
                  }
                  
                </Col>

                


              </Row>

              
              <div className="containerWithTopBorder">
                <h2 className="type-title margin15">授权信息</h2>
                <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  影子评级
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {SHADOW_RATING[custom.shadow_rating]}
                </Col>

                


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  授信天数
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {custom.credit_day}天
                </Col>

                


              </Row>
              </div>

          </div>
          <div className="height50"></div>
          </Spin>



          
            
        )
    }
}
CompanyCustomDetail.contextTypes= { router: React.PropTypes.object.isRequired};

export default  Form.create()(CompanyCustomDetail);
